<script lang="ts" setup>
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {PictureOutlined, SettingOutlined, UserOutlined} from '@ant-design/icons-vue'
import MainLayout from '@/components/layout/MainLayout.vue'

const router = useRouter()
const route = useRoute()

const collapsed = ref(false)
const selectedKeys = ref<string[]>([])

// 根据当前路由设置选中的菜单
watch(() => route.path, (path) => {
  if (path.includes('/admin/user')) {
    selectedKeys.value = ['user']
  } else if (path.includes('/admin/picture')) {
    selectedKeys.value = ['picture']
  }
}, {immediate: true})

// 菜单选择
const handleMenuSelect = ({key}: { key: string }) => {
  switch (key) {
    case 'user':
      router.push('/admin/user')
      break
    case 'picture':
      router.push('/admin/picture')
      break
  }
}
</script>

<template>
  <main-layout>
    <div class="admin-container">
      <a-layout>
        <!-- 侧边栏 -->
        <a-layout-sider
            v-model:collapsed="collapsed"
            :width="220"
            breakpoint="lg"
            collapsible
            theme="light"
        >
          <div class="admin-title">
            <SettingOutlined/>
            <span v-if="!collapsed">管理后台</span>
          </div>
          <a-menu
              v-model:selected-keys="selectedKeys"
              mode="inline"
              @select="handleMenuSelect"
          >
            <a-menu-item key="user">
              <UserOutlined/>
              <span>用户管理</span>
            </a-menu-item>
            <a-menu-item key="picture">
              <PictureOutlined/>
              <span>图片审核</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>

        <!-- 主内容区 -->
        <a-layout-content class="admin-content">
          <router-view/>
        </a-layout-content>
      </a-layout>
    </div>
  </main-layout>
</template>

<style lang="scss" scoped>
.admin-container {
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - 64px - 70px);
}

.admin-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 64px;
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
  border-bottom: 1px solid #f0f0f0;

  span {
    white-space: nowrap;
  }
}

.admin-content {
  background: #fff;
  padding: 24px;
  min-height: calc(100vh - 64px - 70px);
}

:deep(.ant-layout-sider) {
  background: #fff;
  border-right: 1px solid #f0f0f0;
}

:deep(.ant-menu) {
  border-right: none;
}
</style>